<template>
	<view class="work-search-page page">
		<image :src="`${cloudStorage}index/top-bg.png`" mode="widthFix" class="top-bg"></image>
		<CustomNav :isBack="true" color="#000" :topBgColor="topBgColor" :title="title"></CustomNav>
		<view class="search-block block" :style="'margin-top:'+mt">
			<image class="search-icon" src="@/static/image/search.png"></image>
			<input class="search-input" maxlength="20" placeholder="请输入关键词" placeholder-style="input-placeholder"
				@confirm="searchConfirm" />
		</view>
		<view class="filter-block block">
			<view class="filter-item">
				<view class="screen-name">
					<NormalPicker @selected="bindSort" :range="sortOption" name="name" :value="sort" class="screen-picker"></NormalPicker>
				</view>
				<view class="screen-icon iconfont icon-xiala"></view>
			</view>
			<view :style="(filter.valuation||filter.minPrice||filter.maxPrice||filter.minStartTime||filter.maxStartTime||filter.minPopulation||filter.maxPopulation)?'background:#FC9B12;color:#fff':''" @click="navigate('/page_other/work/conditions')" class="filter-item">
				<view class="screen-name">筛选</view>
				<view class="screen-icon iconfont icon-shaixuan"></view>
			</view>
		</view>
		<view class="list-block block">
			<template v-if="list.length>0">
				<WorkItem :detail="item" v-for="item in list" :key="item.id"></WorkItem>
			</template>
			<template v-if="list.length==0&&!more">
				<view class="empty">暂无数据</view>
			</template>
			<template v-if="list.length>0&&!more">
				<view class="empty">没有更多了</view>
			</template>
		</view>
	</view>
</template>

<script>
	import {NormalPicker} from '@/components/Picker/NormalPicker'
	import {getOrderBasis,getWorkPublicList} from '@/api/work.js'
	import {keyValueToArray,isMore} from "@/util/util.js"
	import WorkItem from '@/components/WorkItem/WorkItem'
import { getStorage } from '../../util/auth'
	export default {
		components:{NormalPicker,WorkItem},
		data() {
			return {
				topBgColor: 'rgba(0,0,0,0)',
				title: '',
				
				name:'',
				sort:1,
				sortOption:[],
				page:1,
				limit:10,
				list:[],
				total:0,
				more:true,
				
				filter:{
					type:0,
					valuation:0,
					minPrice:'',
					maxPrice:'',
					minStartTime:'',
					maxStartTime:'',
					minPopulation:'',
					maxPopulation:''
				}
			}
		},
		watch:{
			name(){
				this.reload();
			},
			sort(){
				this.reload();
			}
		},
		methods: {
			bindSort(e){
				this.sort=e;
			},
			reload(){
				this.page=1;
				this.getList()
			},
			searchConfirm(e) {
				this.name=e.detail.value
			},
			getSortOption(){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				getOrderBasis().then((res)=>{
					this.sortOption=keyValueToArray(res)
				})
			},
			getList(refresh=true){
				const position=this.$store.getters.position;
				let conf={page:this.page,limit:this.limit,order:this.sort,name:this.name,...this.filter};
				if(position){
					conf.longitude=position.longitude;
					conf.latitude=position.latitude
				}
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				getWorkPublicList(conf).then(res=>{
					if(refresh){
						this.list=res.list;
					}else{
						this.list=[...this.list,...res.list];
					}
					this.more=isMore(this.page,this.limit,res.count)
					this.total=res.count;
				})
			}
		},
		onReachBottom() {
			if(this.more){
				this.page++;
				this.getList(false);
			}
		},
		onUnload() {
			uni.$off('conditions');
		},
		async onLoad(option) {
			uni.$on('conditions',()=>{
				const conditions=getStorage('conditions');
				Object.keys(conditions).forEach(item=>{
					this.$set(this.filter,item,conditions[item])
				})
				this.reload()
			})
			this.title = option.name=='全部'?'零活列表':option.name || '零活列表';
			this.filter.type = option.type || 0;
			await this.getSortOption()
			await this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	.work-search-page {
		overflow: hidden;

		.top-bg {
			position: absolute;
			z-index: -1;
			width: 100%;
		}

		.block {
			width: $content-width;
		}

		.search-block {
			display: flex;
			align-items: center;
			margin: 0 auto;
			height: 80rpx;
			background: rgba(255, 255, 255, .5);
			border-radius: 20px;
			padding: 0 20rpx;

			.search-icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}

			.search-input {
				width: calc(100% - 60rpx);
				height: 100%;
				font-size: 28rpx;
			}
		}
		.filter-block{
			margin: 30rpx auto;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			.filter-item{
				height: 55rpx;
			    display: flex;
			    align-items: center;
			    border-radius: 20px;
			    font-size: 24rpx;
			    background: #f4f4f4;
			    padding:0 20rpx;
			    margin-left: 12rpx;
			    color: #333;
				.screen-picker{
					width: 180rpx;
					height: 100%;
				}
			    .iconfont{
			        font-size: 28rpx;
			        margin-left: 8rpx;
			    }
			    .icon-xiala{
			        font-size: 24rpx;
			        margin-left: 8rpx;
			    }
			}
		}
		.list-block{
			margin: 0 auto;
		}
	}
</style>